import Alert from '@mui/material/Alert';
import Typography from '@mui/material/Typography';

import { OTPStatus } from '../../constants/otp-status';

interface Props {
    status: OTPStatus;
    error: string;
}

const OTPMessage = (props: Props) => {
    const getMessage = () => {
        switch (props.status) {
            case OTPStatus.SENDING_OTP:
                return 'Sending OTP to your email...';

            case OTPStatus.EMAIL_SENT:
                return (
                    <Alert variant="filled" severity="success">
                        We sent the OTP to your email
                    </Alert>
                );
            case OTPStatus.CHECKING_OTP:
                return 'Checking your OTP...';

            case OTPStatus.INVALID_OTP:
                return (
                    <Alert variant="filled" severity="error">
                        {props.error ? props.error : 'Your OTP is invalid. Please try again.'}
                    </Alert>
                );
        }
    };

    return (
        <>
            <style jsx global>{`
                .message {
                    color: #ffffff !important;
                }
            `}</style>

            <Typography className={'message'} align="center">
                {getMessage()}
            </Typography>
        </>
    );
};

export default OTPMessage;
